import { Component } from 'react'
import './Element.scss'

class Element extends Component {
  state = {
    list: [
      { label: '线上活动', name: '线上活动', checked: false },
      { label: '推广类', name: '推广类', checked: false },
      { label: '线下活动', name: '线下活动', checked: false },
      { label: '品牌介绍', name: '品牌介绍', checked: false },
    ],
    isShowSwitch: false,
    sex: '1', //单选按钮
    mobile: '', //手机号
    occupation: '', //职业
    describe: '', //描述
    data1: '', //日期
    data2: '', //日期
    city: 'hebei', //城市
  }
  // 改变状态
  ChangeSwicth = () => {
    this.setState({
      isShowSwitch: !this.state.isShowSwitch,
    })
  }
  // 单选
  handSex = (e) => {
    this.setState({
      sex: e.target.value,
    })
  }
  // 多选
  handChange = (e, index) => {
    if (e.target.type === 'checkbox') {
      // eslint-disable-next-line react/no-direct-mutation-state
      this.state.list[index].checked = !this.state.list[index].checked
    }
    let name = e.target.name
    let value = e.target.value
    this.setState({
      [name]: value,
    })
  }
  // 电话
  handMobile = (e) => {
    this.setState({
      mobile: e.target.value,
    })
  }
  // 职业
  handOccupation = (e) => {
    this.setState({
      occupation: e.target.value,
    })
  }
  // 描述
  handDescribe = (e) => {
    this.setState({
      describe: e.target.value,
    })
  }
  handData1 = (e) => {
    this.setState({
      data1: e.target.value,
    })
  }
  handData2 = (e) => {
    this.setState({
      data2: e.target.value,
    })
  }
  handCity = (e) => {
    this.setState({
      city: e.target.value,
    })
  }
  // 提交
  submit = (e) => {
    e.preventDefault()
    console.log(this.state)
  }
  reset = () => {}
  render() {
    return (
      <div>
        <form onSubmit={this.submit}>
          <div className="acti-name">
            <span>活动名称</span>
            <input
              type="text"
              disabled="disabled"
              placeholder="前端前景技术发展交流"
            />
          </div>
          <div className="acti-city">
            <span>城市</span>
            <select value={this.state.city} onChange={this.handCity}>
              <option value="hebei">河北</option>
              <option value="shijiazhuang">石家庄</option>
              <option value="zhengzong">正宗</option>
              <option value="anhui">安徽</option>
              <option value="banmian">板面</option>
            </select>
          </div>
          <div className="acti-date">
            <span> 日期 </span>
            <input
              type="text"
              onChange={this.handData1}
              placeholder="Pick a date"
            />
            <i> - </i>
            <input
              type="text"
              onChange={this.handData2}
              placeholder="Pick a date"
            />
          </div>
          <div className="acti-mobile">
            <span> 联系电话 </span>
            <input
              type="text"
              onChange={this.handMobile}
              placeholder="请输入联系电话"
            />
          </div>
          <div className="acti-switch">
            <span> 电话沟通 </span>
            <div
              onClick={this.ChangeSwicth}
              className={!this.state.isShowSwitch ? 'isShow2' : 'isShow'}
            >
              <div></div>
            </div>
          </div>
          <div className="acti-occupation">
            <span> 目前职业 </span>
            <input
              type="text"
              onChange={this.handOccupation}
              placeholder="请输入目前职业"
            />
          </div>
          <div className="acti-type">
            <span> 活动类型 </span>
            <div>
              {this.state.list.map((item, index) => {
                return (
                  <label key={index}>
                    <input
                      type="checkbox"
                      checked={item.checked}
                      name={item.name}
                      onChange={(e) => this.handChange(e, index)}
                    />
                    {''}
                    <span>{item.label}</span>
                  </label>
                )
              })}
            </div>
          </div>
          <div className="acti-sponsor">
            <span> 活动赞助商 </span>
            <label>
              <input
                type="radio"
                value="1"
                checked={this.state.sex === '1'}
                onChange={this.handSex}
              />
              淘宝
            </label>
            <label>
              <input
                type="radio"
                value="2"
                checked={this.state.sex === '2'}
                onChange={this.handSex}
              />
              京东
            </label>
          </div>
          <div className="acti-describe">
            <div> 描述 </div>
            <textarea
              cols="30"
              onChange={this.handDescribe}
              rows="3"
            ></textarea>
          </div>
          <div className="btn-add">
            <div>
              <button type="submit">提交</button>
              <button type="reset">重置</button>
            </div>
          </div>
        </form>
      </div>
    )
  }
}

export default Element
